
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>查看日程</title>
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" type="text/css" href="css/notebookview.css"/>
  <link rel="stylesheet" href="layui/css/layui.css">
  <script src="layui/layui.js"></script>
  <script src="../jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
  <div id="app">
    <el-row :gutter="20">
    	<div class="left_col">
			      <el-col :span="6">
			        <el-row class="tac">
			          <el-menu
			            default-active="2"
			            class="el-menu-vertical-demo"
			            >
			            <el-menu-item index="1" @click="creatRiCheng">
			              <i class="el-icon-menu"></i>
			              <span slot="title">创建日程</span>
			            </el-menu-item>
			            <el-menu-item index="2" @click="getState0">
			              <i class="el-icon-document"></i>
			              <span slot="title">待办日程({{totalState0}})</span>
			            </el-menu-item>
			            <el-menu-item index="3"  @click="getState1">
			              <i class="el-icon-setting"></i>
			              <span slot="title">已办日程({{totalState1}})</span>
			            </el-menu-item>
			          </el-menu>
			        </el-row>
		      </el-col>
     </div>
     
     <div class="right_col">
      <el-col :span="18">
      	<div class="search">
      		<input class="search_input" type="search" name="" id="" v-model="title" placeholder="输入标题搜索"/>
      		<input type="text" placeholder="搜索时间日期" class="layui-input" id="layer_date">
      		<button  @click="searchTitle" class="button">确定</button>
      		<button  @click="refresh" class="button" style="background: rgb(120, 167, 60);border-color: rgb(120, 167, 60);">刷新</button>
      	</div>
    
      	<div class="list">
      		<ul  v-if='state===0'>  <!--待办-->
      			<li v-for="item in tableData">
      				<div class="li_item">
      					<p>{{item.time}}</p>
      					<div class="div_item" v-for="item_data in item.data">
      							<input type="checkbox" name="" id="" value=""  @click="changeState(item_data.id,$event)"/>
      							<span @click="openDetail(item_data.id)">{{item_data.title}}({{item_data.startTime}}~{{item_data.endTime}})</span>
      							<button  @click="delete1(item_data.id)">删除</button>
      					</div>
      				</div>
      			</li>
      		</ul>
      		<ul class="un_ul"  v-if='state===1'> 	<!--已办-->
      			<li v-for="item in tableData">
      				<div class="li_item">
      					<p>{{item.time}}</p>
      					<div class="div_item" v-for="item_data in item.data">
      							<span>{{item_data.title}}({{item_data.startTime}}~{{item_data.endTime}})</span>
      					</div>
      				</div>
      			</li>
      		</ul>
      	</div>
      </el-col>
     </div>  
    </el-row>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="js/axios.js"></script>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  
  
  <script>
  layui.use('laydate', function(){
  var laydate = layui.laydate;
  //执行一个laydate实例
  laydate.render({
    elem: '#layer_date' //指定元素
 		,done: function(value, date, endDate){
   	 console.log(value);//得到日期生成的值，如：2017-08-18
   	 vm.chooseDate(value);
 		}
  });
});
window.onload=function(){
	  			layui.use(['layer', 'form'], function(){
						var layer = layui.layer/*全局变量layer*/
						,form = layui.form;
						//iframe层
					});
}


function div_item_length(){
	return  $('.div_item').length;
}

    let vm = new Vue({
      el: '#app',
      data() {
      return {
        tableData: [
        ],
        input21: '',
        postUrl:developURL+richengDK+'trip/',
       	token : localStorage.token,
        state:0,
        totalState0:0,
        totalState1:0,
        lastState:0,/*保存上一条状态*/
       	title:'',
       	tripDate:'',
       	lastTitle:'',
       	lasttripDate:'',
       	div_item_length:0,
      }
    },
    methods: {
    	getState1(){/*获取已办*/
    		if(this.state!=1){
    				this.state=1;
    		}
    		this.getList(this.state);
    	},
    	getState0(){/*获取待办*/
    		if(this.state!=0){
    				this.state=0;
    		}
    		this.getList(this.state);
    	},
    	creatRiCheng(){/*创建日程*/
						layer.open({
							type: 2,
							title: '创建日程',
							shadeClose: true,
							shade: 0.8,
							area: ['100%', '100%'],
							content: 'notebook.html' //iframe的url
						});
    	},
      refresh(){/*刷新*/
				location.reload();
      },
      chooseDate(val){/*搜索日期*/
		     this.tripDate =val;
		     	layui.use(['layer', 'form'], function(){
						var layer = layui.layer/*全局变量layer*/
						,form = layui.form;
						//iframe层
						  layer.msg('加载中', {
							  icon: 16,
							  shade: 0.01
							});
					});
			if(this.lasttripDate!=this.tripDate){
					this.tableData=[];
					this.lasttripDate=this.tripDate;
				}
      	let _this = this;
      	  axios.post(this.postUrl+'list?access_token='+this.token, {
		        "state":this.state,
		        "pageQuery":{
								"pageNum":_this.tableData.length,
								"pageSize":5
							},
						"tripDate":this.tripDate,
		      }).then(function (response) {
		          console.log(response)
		          _this.state===0?_this.totalState0 = response.data.extra.total:	_this.totalState1 = response.data.extra.total;
		          	let codeData = response.data.codeData;
		          	if(codeData.length===0){
		          		 layer.close(layer.index);
		          		 layer.msg('已无更多数据', function(){
										//关闭后的操作
										});
		          		return ;
		          	}
		          	for(let key in codeData){
			          			codeData[key].time= _this.dealData(codeData[key].time,1);
			          			for(let val in 	codeData[key].data){
			          				codeData[key].data[val].startTime = _this.dealData(codeData[key].data[val].startTime,2);
			          					codeData[key].data[val].endTime = _this.dealData(codeData[key].data[val].endTime,2);
			          			}
			          			_this.tableData.push(codeData[key]);
		          	}
		          	document.addEventListener('scroll',_this.loadMore,true);/*绑定事件*/
		          	layer.close(layer.index);
		      }).catch(function (error) {
		      	　console.log('出错了');
		      　　		console.log(error);
		      });
		      },
      changeState(val,ev){/*改变状态*/
			     		//iframe层
			     		let _this =this;
			     		layer.confirm('是否修改为完成状态？', {
							  btn: ['确定','取消'] //按钮
							}, function(){
					    axios.post(_this.postUrl+'update?access_token='+_this.token, {
				      		  "state":1,
						        "id":val
				      }).then(function (response) {
				          console.log(response)
				          console.log('updateSetState=1变为已读')
				      }).catch(function (error) {
				      　　alert(error);
				      });
							 layer.msg('已修改成功', {icon: 1},function(){
							 		location.reload();
							 });
							},function(){
									ev.target.checked=false;/*不选中*/
							});
      },
      getList(state=0){/*获取数据*/
      	  layui.use(['layer', 'form'], function(){
						var layer = layui.layer/*全局变量layer*/
						,form = layui.form;
						//iframe层
						  layer.msg('加载中', {
							  icon: 16,
							  shade: 0.01
							});
					});
					console.log(state);
					console.log(this.lastState);
				if(this.lastState!=state){/*换了状态，清空各类选项*/
					this.tableData=[];
       		this.title='';
       		this.tripDate='';
       		this.lastTitle='';
       		this.lasttripDate='';
					this.lastState=state;
				}
      	let _this = this;
      	  axios.post(this.postUrl+'list?access_token='+this.token, {
		        "state":this.state,
		        "pageQuery":{
								"pageNum":_this.tableData.length,
								"pageSize":5
							},
		      }).then(function (response) {
		          console.log(response)
		          _this.state===0?_this.totalState0 = response.data.extra.total:	_this.totalState1 = response.data.extra.total;
		          	let codeData = response.data.codeData;
		          	if(codeData.length===0){
		          		 layer.close(layer.index);
		          		 layer.msg('已无更多数据', function(){
										//关闭后的操作
										});
		          		return ;
		          	}
		          	for(let key in codeData){
			          			codeData[key].time= _this.dealData(codeData[key].time,1);
			          			for(let val in 	codeData[key].data){
			          				codeData[key].data[val].startTime = _this.dealData(codeData[key].data[val].startTime,2);
			          					codeData[key].data[val].endTime = _this.dealData(codeData[key].data[val].endTime,2);
			          			}
			          			_this.tableData.push(codeData[key]);
		          	}
		          	document.addEventListener('scroll',_this.loadMore,true);/*绑定事件*/
		          	console.log(_this.tableData);
		          	layer.close(layer.index);
		      }).catch(function (error) {
		      	　console.log('出错了');
		      　　		console.log(error);
		      });
      },
      searchTitle(){/*搜索标题*/
     		let _this = this;
      	  layui.use(['layer', 'form'], function(){
						var layer = layui.layer/*全局变量layer*/
						,form = layui.form;
						//iframe层
						  layer.msg('加载中', {
							  icon: 16,
							  shade: 0.01
							});
					});
					if(this.lastTitle!=this.title){
						this.tableData=[];
						this.lastState=this.title;
					}
					axios.post(this.postUrl+'list?access_token='+this.token, {
		        "state":_this.state,
						"title":_this.title,
						"pageQuery":{
								"pageNum":_this.tableData.length,
								"pageSize":5
							},
		      }).then(function (response) {
		          console.log(response)
		          _this.state===0?_this.totalState0 = response.data.extra.total:	_this.totalState1 = response.data.extra.total;
		          	let codeData = response.data.codeData;
		          	if(codeData.length===0){
		          		 layer.close(layer.index);
		          		 layer.msg('已无更多数据', function(){
										//关闭后的操作
										});
		          		return ;
		          	}
		          	for(let key in codeData){
			          			codeData[key].time= _this.dealData(codeData[key].time,1);
			          			for(let val in 	codeData[key].data){
			          				codeData[key].data[val].startTime = _this.dealData(codeData[key].data[val].startTime,2);
			          					codeData[key].data[val].endTime = _this.dealData(codeData[key].data[val].endTime,2);
			          			}
			          			_this.tableData.push(codeData[key]);
		          	}
		          	document.addEventListener('scroll',_this.loadMore,true);/*绑定事件*/
		          	layer.close(layer.index);
		      }).catch(function (error) {
		      	　console.log('出错了');
		      　　		console.log(error);
		      });
      },
      dealData(date,val){
					let d = new Date(date);
					if(val===1){
						return d.getFullYear()+'-'+Number(d.getMonth()+1) +'-'+d.getDate();
					}else if(val===2){
						return d.getHours()+':'+d.getMinutes();
					}
			},
			loadMore(){
					if($('.list').scrollTop()+$('.list').height()>=$('.list ul').height()){
//							console.log("ww");
							document.removeEventListener('scroll',this.loadMore,true);/*解绑滚动事件，避免多次请求*/
							if(this.tableData.length!=0){
								this.getList(this.state);
							}
					}
			},
			openDetail(val){/*打开detail*/
						layer.open({
							type: 2,
							title: '创建日程',
							shadeClose: true,
							shade: 0.8,
							area: ['100%', '100%'],
							content: 'notebookDetail.html?val='+val //iframe的url
						});
			},
			delete1(val){
				let _this = this;
					layer.confirm('是否删除？', {
							  btn: ['确定','取消'] //按钮
							}, function(){
					    axios.post(_this.postUrl+'delete/'+val+'?access_token='+_this.token, {
				      }).then(function (response) {
				          console.log(response)
				          if(response.data.code===200){
				          	 layer.msg('已删除成功', {icon: 1},function(){
										 		location.reload();
										 });
				          }else{
				          	layer.msg('出现错误', {icon: 2});
				          }
				      }).catch(function (error) {
				      　　		layer.msg('出现错误', {icon: 2});
				      });

							});
			}
    },
    mounted: function(){
    	document.addEventListener('scroll',this.loadMore,true);/*绑定事件*/
    	this.getState0();/*获取待办*/
    },
    updated(){
    		this.div_item_length =div_item_length();
    }
  })

  </script>
</html>
